<script setup>
import { ref, watch } from 'vue'
import userApi from '@/apis/user'

const logs = ref([])
const tableRef = ref(null)

const total = ref(0)
const currentPage = ref(1)

const getData = async (page = 1) => {
  const { data: pagination } = await userApi.score.logs(page)
  logs.value = pagination.data
  total.value = pagination.total
  currentPage.value = pagination.current_page
  //遍历logs修改值
  logs.value.forEach((item) => {
    item.create_at = item.create_at.substring(0, 16)
  })
}

watch(
  currentPage,
  (val) => {
    console.log(val)
    getData(val)
  },
  { immediate: true }
)
</script>

<template>
  <div class="text-[--el-text-color-primary]">
    <div class="mt-3 mx-5 space-y-4">
      <div class="text-xl font-bold">积分日志</div>
      <div class="text-sm text-[--el-text-color-secondary]">提供用户最近100条积分变动信息</div>
      <div class="w-full">
        <el-table ref="tableRef" :data="logs" stripe border>
          <el-table-column prop="create_at" label="操作日期" width="*" />
          <el-table-column prop="remark" label="操作行为" align="center" width="*" />
          <el-table-column prop="score_label" label="积分" align="center" width="*" />
          <el-table-column prop="after" label="变更后" align="center" width="*" />
        </el-table>
        <div class="flex justify-center my-3">
          <el-pagination
            v-model:current-page="currentPage"
            :total="total"
            :default-page-size="10"
            hide-on-single-page
            layout="prev, pager, next"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
